<template>
	<uni-col class="descriptions-item">
		<view class="descriptions-item-content">
			<view class="descriptions-item-label" @click="type && label != 0 ? viewTicketList() : ''">{{ label }}</view>
			<view class="descriptions-item-value">
				<slot v-if="$slots.content" name="content" />
				<view v-else class="default-value" :title="value">{{ value }}</view>
			</view>
		</view>
	</uni-col>
</template>

<script>
	export default {
		name: 'DescriptionsItem',
		props: {
			data: {
				type: Object
			},
			pageType: {
				type: String
			},
			label: {
				required: true
			},
			value: {
				required: true
			},
			type: {
				required: false
			}
		},
		methods: {
			viewTicketList() {
				this.$emit("viewTicketList", this.data, this.pageType, this.type)
			}
		}
	}
</script>

<style scoped lang="scss">
	.descriptions-item {
		padding-bottom: 16px;
		padding-right: 20px;
		width: 20%;

		span {
			display: inline-block;
		}

		.descriptions-item-content {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			color: rgba(0, 0, 0, .65);
			font-size: 14px;
			line-height: 1.5;
			width: 100%;

			.descriptions-item-label {
				flex-grow: 0;
				flex-shrink: 0;
				color: rgba(0, 0, 0, .85);
				font-weight: 400;
				font-size: 14px;
				line-height: 1.5;
				color: #409EFF;
			}

			.descriptions-item-value {
				flex-grow: 1;
				overflow: hidden;

				.default-value {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>
